<template>
	<el-main class="main-bg">
		<bread-crumbs :title="title" class="bread-crumbs"></bread-crumbs>
		<div v-if="isHomePage" class="home-content">
			<div class="welcome-block">
				<div class="welcome-icon"><i class="el-icon-s-opportunity"></i></div>
				<div class="welcome-title">欢迎使用实习管理系统的设计与实现</div>
				<div class="welcome-en">Welcome to the Internship Management System</div>
			</div>
			<div class="quick-features">
				<div class="feature-card" v-for="item in featureList" :key="item.title">
					<div class="feature-icon"><i :class="item.icon"></i></div>
					<div class="feature-title">{{ item.title }}</div>
					<div class="feature-desc">{{ item.desc }}</div>
				</div>
			</div>
			<div class="system-intro">
				<div class="intro-title">系统简介</div>
				<div class="intro-divider"><i class="el-icon-s-promotion"></i></div>
				<div class="intro-desc">
					本系统集成了学生、教师、实习单位等多角色管理，支持实习任务分配、过程跟踪、成绩评定、信息统计等功能，助力学校高效开展实习管理工作，提升实习质量与管理效率。
				</div>
			</div>
		</div>
		<router-view class="router-view" style="height:auto;background: transparent;"></router-view>
	</el-main>
</template>

<script>
	import menu from "@/utils/menu";
	export default {
		data() {
			return {
				menuList: [],
				role: "",
				currentIndex: -2,
				itemMenu: [],
				title: '',
				featureList: [
					{ icon: 'el-icon-s-custom', title: '班级管理', desc: '管理班级信息' },
					{ icon: 'el-icon-user', title: '学生管理', desc: '学生信息录入、查询与维护。' },
					{ icon: 'el-icon-s-custom', title: '教师管理', desc: '教师信息管理与分配。' },
					{ icon: 'el-icon-office-building', title: '实习单位管理', desc: '实习单位信息维护与分配。' },
					{ icon: 'el-icon-document', title: '实习作业管理', desc: '实习作业布置、提交与批改。' },
					{ icon: 'el-icon-star-on', title: '教师评分', desc: '教师对学生实习过程进行评分。' },
					{ icon: 'el-icon-s-data', title: '单位成绩管理', desc: '实习单位对学生成绩评定。' },
					{ icon: 'el-icon-setting', title: '系统管理', desc: '系统参数配置与前台内容管理。' },
				],
			};
		},
		computed: {
			isHomePage() {
				// 只在首页路由显示简介
				const path = this.$route.path;
				return path === '/' || path === '/home' || path === '/index';
			}
		},
		mounted() {
			let menus = menu.list();
			this.menuList = menus;
			this.role = this.$storage.get("role");
		},
		created() {
			this.init();
		},
		methods: {
			init(){
				this.$nextTick(()=>{
					// let h = document.getElementsByClassName('el-aside')[0].clientHeight
					// document.getElementsByClassName('el-main')[0].style.minHeight = "calc(100vh - 60px - " + h+'px)'
				})
			},
			menuHandler(menu) {
				this.$router.push({
					name: menu.tableName
				});
				this.title = menu.menu;
			},
			titleChange(index, menus) {
				this.currentIndex = index
				this.itemMenu = menus;
				console.log(menus);
			},
			homeChange(index) {
				this.itemMenu = [];
				this.title = ""
				this.currentIndex = index
				this.$router.push({
					name: 'home'
				});
			},
			centerChange(index) {
				this.itemMenu = [{
					"buttons": ["新增", "查看", "修改", "删除"],
					"menu": "修改密码",
					"tableName": "updatePassword"
				}, {
					"buttons": ["新增", "查看", "修改", "删除"],
					"menu": "个人信息",
					"tableName": "center"
				}];
				this.title = ""
				this.currentIndex = index
				this.$router.push({
					name: 'home'
				});
				
			}
		}
	};
</script>
<style lang="scss" scoped>
	a {
		text-decoration: none;
		color: #555;
	}

	a:hover {
		background: #00c292;
	}

	.nav-list {
		width: 100%;
		margin: 0 auto;
		text-align: left;
		margin-top: 20px;

		.nav-title {
			display: inline-block;
			font-size: 15px;
			color: #333;
			padding: 15px 25px;
			border: none;
		}

		.nav-title.active {
			color: #555;
			cursor: default;
			background-color: #fff;
		}
	}

	.nav-item {
		margin-top: 20px;
		background: #FFFFFF;
		padding: 15px 0;

		.menu {
			padding: 15px 25px;
		}
	}

	.main-bg {
		padding: 0 24px;
		min-height: 100vh;
		background: linear-gradient(135deg, #e6f3ff 0%, #fafdff 100%);
	}

	.home-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40px;
	}
	.welcome-block {
		text-align: center;
		margin-bottom: 36px;
		.welcome-icon {
			font-size: 48px;
			color: #409EFF;
			margin-bottom: 10px;
			filter: drop-shadow(0 2px 8px #e6f3ff);
		}
		.welcome-title {
			font-size: 32px;
			font-weight: bold;
			color: #2176ae;
			letter-spacing: 2px;
			margin-bottom: 6px;
			background: linear-gradient(90deg, #6ec6ff 0%, #e6f3ff 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.welcome-en {
			font-size: 18px;
			color: #7bb1e6;
			margin-bottom: 0;
			letter-spacing: 1px;
		}
	}
	.quick-features {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 28px 32px;
		margin-bottom: 38px;
		.feature-card {
			width: 210px;
			min-height: 160px;
			background: #fff;
			border-radius: 16px;
			box-shadow: 0 2px 16px 0 rgba(64,158,255,0.08);
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 28px 18px 18px 18px;
			transition: box-shadow 0.18s cubic-bezier(0.4,0,0.2,1), transform 0.18s cubic-bezier(0.4,0,0.2,1);
			cursor: pointer;
			&:hover {
				box-shadow: 0 6px 24px 0 rgba(64,158,255,0.16);
				transform: translateY(-4px) scale(1.03);
			}
			.feature-icon {
				font-size: 32px;
				color: #409EFF;
				margin-bottom: 12px;
			}
			.feature-title {
				font-size: 18px;
				font-weight: bold;
				color: #2176ae;
				margin-bottom: 6px;
			}
			.feature-desc {
				font-size: 14px;
				color: #666;
				text-align: center;
				line-height: 1.7;
			}
		}
	}
	.system-intro {
		text-align: center;
		margin: 40px auto 40px;
		padding: 32px 30px 24px 30px;
		background: rgba(255,255,255,0.95);
		border-radius: 18px;
		box-shadow: 0 4px 24px 0 rgba(64,158,255,0.08);
		max-width: 700px;
		display: flex;
		flex-direction: column;
		align-items: center;
		.intro-title {
			font-size: 22px;
			font-weight: bold;
			color: #409EFF;
			margin-bottom: 8px;
			letter-spacing: 2px;
		}
		.intro-divider {
			width: 60px;
			height: 2px;
			background: linear-gradient(90deg, #409EFF 0%, #e6f3ff 100%);
			margin: 0 auto 18px auto;
			border-radius: 2px;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			i {
				color: #409EFF;
				font-size: 22px;
				background: #fff;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -60%);
				z-index: 2;
				padding: 0 4px;
			}
		}
		.intro-desc {
			font-size: 16px;
			color: #444;
			line-height: 2.2;
			margin-top: 10px;
			max-width: 90%;
			letter-spacing: 1px;
			background: rgba(230,243,255,0.5);
			border-radius: 8px;
			padding: 18px 18px 14px 18px;
			box-shadow: 0 2px 8px 0 rgba(64,158,255,0.04);
			text-align: center;
			font-weight: 500;
		}
	}

	.router-view {
		padding: 10px;
		margin-top: 10px;
		background: #FFFFFF;
		box-sizing: border-box;
	}

	.bread-crumbs {
		width: 100%;
		// border-bottom: 1px solid #e9eef3;
		// border-top: 1px solid #e9eef3;
		margin-top: 10px;
		box-sizing: border-box;
	}
	
	.detail-form-content {
	    background: transparent;
	}

	// 全局按钮美化
	:deep(.el-button) {
		border-radius: 22px !important;
		font-size: 15px !important;
		font-weight: 500;
		min-width: 90px;
		height: 38px;
		padding: 0 22px;
		box-shadow: 0 2px 8px 0 rgba(64,158,255,0.06);
		border: none;
		transition: background 0.18s cubic-bezier(0.4,0,0.2,1), color 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s cubic-bezier(0.4,0,0.2,1);
	}
	:deep(.el-button--primary) {
		background: linear-gradient(90deg, #6ec6ff 0%, #e6f3ff 100%) !important;
		color: #2176ae !important;
	}
	:deep(.el-button--success) {
		background: linear-gradient(90deg, #b2ebf2 0%, #e6f3ff 100%) !important;
		color: #2176ae !important;
	}
	:deep(.el-button--danger) {
		background: linear-gradient(90deg, #ffd6d6 0%, #ffeaea 100%) !important;
		color: #e57373 !important;
	}
	:deep(.el-button--warning) {
		background: linear-gradient(90deg, #fff9c4 0%, #fffde7 100%) !important;
		color: #bfa100 !important;
	}
	:deep(.el-button--info) {
		background: linear-gradient(90deg, #e0e0e0 0%, #f5f5f5 100%) !important;
		color: #888 !important;
	}
	:deep(.el-button:hover),
	:deep(.el-button:focus) {
		filter: brightness(1.08) saturate(1.1);
		box-shadow: 0 4px 16px 0 rgba(64,158,255,0.12);
	}
	:deep(.el-button.is-disabled),
	:deep(.el-button:disabled) {
		background: #f5f7fa !important;
		color: #bbb !important;
		box-shadow: none !important;
		cursor: not-allowed !important;
	}

	// 操作列按钮纵向排列美化
	:deep(.el-table__row .el-table__cell .op-btns) {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	// 兼容部分页面直接用template包裹按钮
	:deep(.el-table__row .el-table__cell .op-btns > .el-button),
	:deep(.el-table__row .el-table__cell .op-btns > span > .el-button) {
		margin: 0 !important;
	}
	// 评分按钮样式与操作按钮一致
	:deep(.el-button.pingfen-btn),
	:deep(.el-button.danwei-pingfen-btn) {
		background: linear-gradient(90deg, #b2ebf2 0%, #e6f3ff 100%) !important;
		color: #2176ae !important;
		border-radius: 22px !important;
		font-size: 15px !important;
		font-weight: 500;
		min-width: 90px;
		height: 38px;
		box-shadow: 0 2px 8px 0 rgba(64,158,255,0.06);
		border: none;
		transition: background 0.18s cubic-bezier(0.4,0,0.2,1), color 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s cubic-bezier(0.4,0,0.2,1);
	}

	// 表格美化
	:deep(.el-table) {
		background: #fafdff;
		border-radius: 16px;
		box-shadow: 0 4px 24px 0 rgba(64,158,255,0.08);
		overflow: hidden;
		font-size: 15px;
	}
	:deep(.el-table th) {
		background: linear-gradient(90deg, #e6f3ff 0%, #fafdff 100%) !important;
		color: #2176ae !important;
		font-weight: bold;
		font-size: 16px;
		border-bottom: 1.5px solid #e3eaf3 !important;
		letter-spacing: 1px;
	}
	:deep(.el-table td) {
		background: transparent !important;
		color: #333;
		border-bottom: 1px solid #f0f4fa !important;
		font-size: 15px;
	}
	:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
		background: #f3faff !important;
	}
	:deep(.el-table__body tr:hover>td) {
		background: #e6f3ff !important;
		color: #2176ae !important;
		transition: background 0.18s cubic-bezier(0.4,0,0.2,1), color 0.18s cubic-bezier(0.4,0,0.2,1);
	}
	:deep(.el-table__body tr.current-row>td) {
		background: #d0eaff !important;
		color: #2176ae !important;
	}
	:deep(.el-table__header th) {
		border-right: 1px solid #e3eaf3 !important;
	}
	:deep(.el-table__header th:last-child) {
		border-right: none !important;
	}
	:deep(.el-table__body td:last-child) {
		border-right: none !important;
	}
	:deep(.el-table__body td) {
		border-right: 1px solid #f0f4fa !important;
	}
	:deep(.el-table__body tr:last-child td) {
		border-bottom: none !important;
	}
</style>
